<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<th:block th:include="include :: head" />
<body>
<!-- Top Bar Start -->
<div class="topbar">
  <th:block th:include="include :: topbar" />
</div>
<!-- Top Bar End -->
<!-- Left Sidenav -->
<div class="left-sidenav">
  <th:block th:include="include :: left-sidenav" />
</div>
<!-- end left-sidenav-->
<div class="page-wrapper">
  <!-- Page Content-->
  <div class="page-content">
    <div class="container-fluid">
      <!-- Page-Title -->
      <div class="row">
        <div class="col-sm-12">
          <div class="page-title-box">
            <div class="float-right">
              <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="javascript:void(0);">Crovex</a></li>
                <li class="breadcrumb-item active">积分充值</li>
              </ol>
            </div>
            <h4 class="page-title">积分充值</h4>
          </div>
          <!--end page-title-box-->
        </div>
        <!--end col-->
      </div><!-- end page title end breadcrumb -->
      <div class="row">
        <div class="col-lg-12">
          <div class="card">
            <div class="card-body">
              <form>
                <div class="form-group">
                  <p class="text-info mb-3" th:text="'当前剩余积分：' + ${loginUser.score}"></p>
                </div>
                <div class="form-group">
                  <label>账号：</label>
                  <input type="text" readonly="readonly" class="form-control" id="username" th:placeholder="${loginUser.username}">
                </div>
                <div class="form-group" style="position: relative;display: flex;flex-wrap: wrap;">
                  <label>卡密：</label>
                  <input type="text" class="form-control" id="key" style="z-index: 1">
                  <span>
                    <a href="http://buy.youxuepai.xyz/" target="_blank" style="position: absolute;right: 15px;top: 35px;font-size: 16px;z-index: 100;color: #1761fd!important;">赞助我们</a>
                  </span>
                  <p style="z-index: 2"></p>
                </div>
                <button type="submit" id="pay" class="btn btn-gradient-primary">充值</button>
              </form>
            </div>
            <!--end card-body-->
          </div>
          <!--end card-->
        </div>
        <!--end col-->
      </div>
      <!--end row-->
    </div><!-- container -->
    <th:block th:include="include :: footer"/>
    <!--end footer-->
  </div><!-- end page content -->
</div><!-- end page-wrapper -->
<script>
  $(function(){
    $('#pay').on('click', function(){
      event.preventDefault();
      var ii = layer.load(0, {shade: false});
      var username = document.getElementById("username").placeholder;
      var key = document.getElementById("key").value;
      var header = $("meta[name='_csrf_header']").attr("content");
      var token =$("meta[name='_csrf']").attr("content");
      $.ajax({
        cache: false,
        type: "POST",
        url:"../action/pay",
        contentType:'application/json;charset=UTF-8',
        data:JSON.stringify({"username":username,"key":key}),
        async: true,
        beforeSend : function(xhr) {
          xhr.setRequestHeader(header, token);
        },
        success: function(data) {
          console.log(data);
          console.log(data.code);
          layer.close(ii);
          if(data.code == '200'){
            layer.msg(username + ',充值成功!', {
              icon: 1,
              time: 2000 //2秒关闭（如果不配置，默认是3秒）
            }, function(){
            });
          }else{
            layer.msg(username + ',充值失败!', {
              icon: 2,
              time: 2000 //2秒关闭（如果不配置，默认是3秒）
            }, function(){
            });
          }
        },
      });
    });
  })
</script>
</body>

</html>